iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2 Like 2 留言 23952 瀏覽

鐵人賽 Modern Web DAY 25

30天實作線上簡報播放機制系列第 30 篇

技術 ?? - 處理Office的內建圖型

既然還能發文... ECMA-376定義Office內建圖型的方法在規格書的zip檔中，可以找到presetShapeDefinitions.xml這個檔案（...

fillano ‧ 2017-01-20

1 Like 2 留言 15679 瀏覽

鐵人賽 Modern Web DAY 25

30天實作線上簡報播放機制系列第 29 篇

技術 ?? - 雖然沒完賽，還是發一下心得

沒完賽也是一種經驗沒有完賽的原因其實很簡單，發文時沒有確認結果，就關掉網頁了...然後第二天上iT邦，就收到未完賽通知XD 不過真的是年紀慢慢大了，現在cod...

fillano ‧ 2017-01-14

1 Like 2 留言 13138 瀏覽

鐵人賽 Modern Web DAY 25

30天實作線上簡報播放機制系列第 28 篇

技術 ?? - 繪製Office內建的圖型

Office使用的內建圖型定義在ECMA-376的presetShapeDefinitions.xml這份文件中。（下載規格書Part1的zip檔解開後，會看O...

fillano ‧ 2017-01-13

2 Like 0 留言 6785 瀏覽

鐵人賽 Modern Web DAY 25

30天實作線上簡報播放機制系列第 27 篇

技術 ?? - 目前的簡單成果

參考：example012.html 資料的複雜性結果奮鬥最久的還是處理pptx的資料XD 來反省一下...先看一下簡報的架構（排除了一些跟播放沒直接關係的設...

fillano ‧ 2017-01-11

1 Like 0 留言 3850 瀏覽

鐵人賽 Modern Web DAY 25

30天實作線上簡報播放機制系列第 26 篇

技術 26 - 仔細確認Powerpoint的樣板機制

為了避免不斷修改，還是先仔細確認Powerpoint中，投影片與版面配置的圖形如何匹配。 Placeholder的使用方式確認母片、版面配置、投影片的結構很像...

fillano ‧ 2017-01-09

1 Like 0 留言 2314 瀏覽

鐵人賽 Modern Web DAY 25

30天實作線上簡報播放機制系列第 25 篇

技術 25 - 目前碰到的資料剖析問題

可以參考改過的範例：example011.html 這個範例套用了新的修改，而且為了比較明顯看出問題，把圖形的框線加回去。另外，用方向鍵就可以跳到上一張下一張投...

fillano ‧ 2017-01-07

1 Like 0 留言 2359 瀏覽

鐵人賽 Modern Web DAY 24

30天實作線上簡報播放機制系列第 24 篇

技術 24 - 剖析投影片資料

昨天已經初步剖析出版面配置的資料，但是畫出來看還是有些問題。所以在剖析投影片資料前，先來修正一下... 修正版面配置的剖析方式檢查了一下剖析出來的資料，看起來...

fillano ‧ 2017-01-06

1 Like 0 留言 2130 瀏覽

鐵人賽 Modern Web DAY 23

30天實作線上簡報播放機制系列第 23 篇

技術 23 - 剖析佈景主題及版面配置

昨天畫出母片資料後，可以看到一些需要改善的部份，先來調整一下。調整母片資料這部份主要調整了幾個部分：不需要繪製圖形背景時，不要繪製剖析邏輯修正，這是導...

fillano ‧ 2017-01-05

1 Like 0 留言 2152 瀏覽

鐵人賽 Modern Web DAY 22

30天實作線上簡報播放機制系列第 22 篇

技術 22 - 用剖析出的資料試畫母片

大致上剖析出母片資料，除了寫測試之外，還是先試試看可不可以正常畫出來XD 目前產出的母片資料先看看目前產出的母片資料長怎樣： "backgrou...

fillano ‧ 2017-01-04

1 Like 0 留言 1926 瀏覽

鐵人賽 Modern Web DAY 21

30天實作線上簡報播放機制系列第 21 篇

技術 21 - 再次剖析母片

與版面配置、投影片同中有異的架構跟版面配置與投影片一樣，母片中也有common slide data這個最主要的圖形資料集合，但是又各自有自己特有的資料，所以...

fillano ‧ 2017-01-03

1 Like 0 留言 2372 瀏覽

鐵人賽 Modern Web DAY 20

30天實作線上簡報播放機制系列第 20 篇

技術 20 - 投影片的資料架構

為了確實整理好投影片資料，還是回頭從ECMA-376把需要用到的資料做一下整理分析。 p:presentation (presentation，簡報，型別：CT...

fillano ‧ 2017-01-02

1 Like 1 留言 2174 瀏覽

鐵人賽 Modern Web DAY 19

30天實作線上簡報播放機制系列第 19 篇

技術 19 - 畫出標準投影片

之前只顧著做各種文字方塊、動畫效果及轉場效果，反而沒有嘗試畫出一個標準投影片，也就是標題加上文字列表，雖然投影片資料剖析的部份還沒做好，不過還是用預計會產生的資...

fillano ‧ 2017-01-01

1 Like 0 留言 2343 瀏覽

鐵人賽 Modern Web DAY 18

30天實作線上簡報播放機制系列第 18 篇

技術 18 - 重寫pptx parser

昨天發生重大危機，只好開始重寫pptx xml轉成目標json檔的剖析器。 json檔的格式變化簡單地說，現在json檔中每個物件只會有三個屬性： #nam...

fillano ‧ 2016-12-31

2 Like 3 留言 3264 瀏覽

鐵人賽 Modern Web DAY 17

30天實作線上簡報播放機制系列第 17 篇

技術 17 - 大危機...

在研究Text Box的時候發現，之前使用xml2js從xml轉成Javascript Object的方法有大問題... xml2js的問題問題一這個問題是...

fillano ‧ 2016-12-30

1 Like 0 留言 3298 瀏覽

鐵人賽 Modern Web DAY 16

30天實作線上簡報播放機制系列第 16 篇

技術 16 - 文字呈現的細節

弄pptx的剖析有點膩了，今天先來看文字的呈現以及怎麼利用Canvas 2D Context來實作。文字主體(p:txBody)、段落(a:p)與文字展現(a...

fillano ‧ 2016-12-29

1 Like 0 留言 1655 瀏覽

鐵人賽 Modern Web DAY 15

30天實作線上簡報播放機制系列第 15 篇

技術 15 - 剖析投影片中的資訊

在取出母片中的資訊後，接下來要處理的是投影片。不過好像跳過了版面配置？這是有原因的... 跳過版面配置版面配置其實是「幾乎」跳過，因為需要的資訊跟母片差不多，...

fillano ‧ 2016-12-28

1 Like 0 留言 1533 瀏覽

鐵人賽 Modern Web DAY 14

30天實作線上簡報播放機制系列第 14 篇

技術 14 - 剖析母片資訊

母片資訊的重點，在於投影片的背景，主要是在母片中定義好的，所以在投影片的圖形資訊中，必須先把背景的圖形放進去剖析的方式母片中包含很多圖形，其中會被取代掉的其...

fillano ‧ 2016-12-27

1 Like 0 留言 1657 瀏覽

鐵人賽 Modern Web DAY 13

30天實作線上簡報播放機制系列第 13 篇

技術 13 - 有點複雜的timing結構

本來想要先來改進之前的動畫呈現，不過在這之前還是先整理一下描述投影片中timing的結構，因為這個結構有點複雜，需要想好怎麼整理出最終的物件架構。 timing...

fillano ‧ 2016-12-26

1 Like 0 留言 1445 瀏覽

鐵人賽 Modern Web DAY 12

30天實作線上簡報播放機制系列第 12 篇

技術 12 - 剖析佈景主題

終於要開始剖析投影片中的資訊。先看看要做什麼... 目標其實目標很簡單，就是要要取出昨天做轉場的案例中，投影片使用的colorScheme以及colorMap...

fillano ‧ 2016-12-25

2 Like 0 留言 1610 瀏覽

鐵人賽 Modern Web DAY 10

30天實作線上簡報播放機制系列第 10 篇

技術 10 - 開始剖析簡報資料

之前寫了簡單的parser，用來取得pptx中各個檔的關聯性。現在就開始進一步發展這個parser，讓它可以把我們需要的資料從main.json中抽出。不過首...

fillano ‧ 2016-12-23

3 Like 1 留言 2118 瀏覽

鐵人賽 Modern Web DAY 9

30天實作線上簡報播放機制系列第 9 篇

技術 09 - 動畫改進

之前做的動畫效果很簡單，只有右移跟下移的直線動作。另一個基本的動畫是依照弧線來移動，就試著把它實作出來。 jQuery的動畫效果，預設會有加減速，而在Power...

fillano ‧ 2016-12-22

2 Like 0 留言 2450 瀏覽

鐵人賽 Modern Web DAY 8

30天實作線上簡報播放機制系列第 8 篇

技術 08 - 使用node.js取得pptx資訊(1) - 建立檔案關連性列表

之前用node.js試寫的程式，感覺還蠻順的，在Javascript直接處理物件結構感覺也比透過OpenXML SDK來的方便，所以先繼續發展下去吧。調整之前...

fillano ‧ 2016-12-21

2 Like 0 留言 3125 瀏覽

鐵人賽 Modern Web DAY 6

30天實作線上簡報播放機制系列第 6 篇

技術 06 - 使用node.js取得pptx資訊 - 初步剖析

用OpenXML SDK嘗試存取pptx檔取出一些資訊後，想再用node.js嘗試看看可以怎麼做。使用xml2js模組把xml轉成Javascript物件上...

fillano ‧ 2016-12-19

2 Like 0 留言 2384 瀏覽

鐵人賽 Modern Web DAY 5

30天實作線上簡報播放機制系列第 5 篇

技術 05 - 單位的換算

Office OpenXML裡面使用的「單位」，目前看到的有幾個：長度、指定百分比、指定字型大小等，就用03的例子來實驗改進一下長度 ECMA-376使用一種...

fillano ‧ 2016-12-18

1 Like 0 留言 5076 瀏覽

鐵人賽 Modern Web DAY 4

30天實作線上簡報播放機制系列第 4 篇

技術 04 - 透過OpenXML SDK存取pptx

關於資料剖析的初步想法因為最終要產出的教材，是靜態的html檔案，所以資料最好能轉成成方便Javascript處理的格式，也就是JSON或是.js檔。既然微...

fillano ‧ 2016-12-17

1 Like 0 留言 5073 瀏覽

鐵人賽 Modern Web DAY 2

30天實作線上簡報播放機制系列第 2 篇

技術 02 - pptx的檔案結構

使用PowerPoint建立簡報的過程為了要了解pptx裡面會有哪些東西，首先還是要來操作一下PowerPoint。使用PowerPoint製作簡報的過程，不...

fillano ‧ 2016-12-15

2 Like 1 留言 1726 瀏覽

鐵人賽 Modern Web DAY 1

30天實作線上簡報播放機制系列第 1 篇

技術 01 - 專案目標與相關技術資訊

緣起我們原本有做一些SCORM的線上英語教材，製作方式是依據現有的版型與題型，用Excel製作課程的資料，然後套版產生html教材。最近在規劃明年要做的教材...

fillano ‧ 2016-12-14

技術 ?? - 處理Office的內建圖型

技術 ?? - 雖然沒完賽，還是發一下心得

技術 ?? - 繪製Office內建的圖型

技術 ?? - 目前的簡單成果

技術 26 - 仔細確認Powerpoint的樣板機制

技術 25 - 目前碰到的資料剖析問題

技術 24 - 剖析投影片資料

技術 23 - 剖析佈景主題及版面配置

技術 22 - 用剖析出的資料試畫母片

技術 21 - 再次剖析母片

技術 20 - 投影片的資料架構

技術 19 - 畫出標準投影片

技術 18 - 重寫pptx parser

技術 17 - 大危機...

技術 16 - 文字呈現的細節

技術 15 - 剖析投影片中的資訊

技術 14 - 剖析母片資訊

技術 13 - 有點複雜的timing結構

技術 12 - 剖析佈景主題

技術 10 - 開始剖析簡報資料

技術 09 - 動畫改進

技術 08 - 使用node.js取得pptx資訊(1) - 建立檔案關連性列表

技術 06 - 使用node.js取得pptx資訊 - 初步剖析

技術 05 - 單位的換算

技術 04 - 透過OpenXML SDK存取pptx

技術 02 - pptx的檔案結構

技術 01 - 專案目標與相關技術資訊

標記使用者